<template>
	<view class="contentlogin">
		<uni-nav-bar  @clickLeft='Tohome' left-text='二维码' status-bar='true' title="一卡通门禁"></uni-nav-bar>
		<view class='loading' v-if="loading">
			<view class="loader">
				<view class="loader-inner">
					<view class="loader-line-wrap">
						<view class="loader-line"></view>
					</view>
					<view class="loader-line-wrap">
						<view class="loader-line"></view>
					</view>
					<view class="loader-line-wrap">
						<view class="loader-line"></view>
					</view>
					<view class="loader-line-wrap">
						<view class="loader-line"></view>
					</view>
					<view class="loader-line-wrap">
						<view class="loader-line"></view>
					</view>
				</view>
				<view class='londing_txt'>正在登录..</view>
			</view>

		</view>
		<view v-else class="login">
			<image src="../../static/image/bg.png" mode="aspectFill"></image>
			<view class="btn" @click="showModel = true">
				立即注册
			</view>
		</view>
		
		<u-mask :show="showModel" @click="showModel = false">
			<view class="cardBox">
				<u-card margin="60upx" title="注册须知" :foot-style="{padding:0}" >
					<view class="" slot="body">
						<view class="box_warp_dialog">
							<text>1.本程序需要使用手机号码进行注册绑定动态二维码；</text>
							<text>2.手机号是您获取动态二维码的唯一途径；</text>
							<text>3.本程序注册后绑定一卡通平台的账套；</text>
							<text>4.本程序绑定账套后可以使用远程开门功能</text>
							<text>5.本程序注册后可以使用个人报表功能</text>
							<u-checkbox v-model="checked">同意注册</u-checkbox>
						</view>
					</view>
					<view class="box_foot_dialog" slot="foot">
						<view class="asd1" @click="confirm">
							<view style="width: 100%;height: 100%;">
								立即注册
							</view>
						</view>
						<view class="asd2">
							<navigator style="transform: scale(0.8,0.8);width: 100%;height: 100%;" open-type="exit" target="miniProgram">退出程序</navigator>
						</view>
					</view>
				</u-card>
			</view>
		</u-mask>
	</view>

</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	import http from '../../common/vmeitime-http/index.js'
	import {
		Base64Encrypt,
		Base64Decrypt,
		Decrypt,
		EncryptAES,
		SHA256,
		RSA_encrypt,
		RSA
	} from '../../utils/crypto_RSA_AES.js'
	export default {
		components: { uniNavBar },
		data() {
			return {
				title: 'Hello',
				loading: true,
				showModel: false,
				checked: false
			}
		},
		created() {
			let that = this;
			// console.error(this.$Fpublic, RSA_encrypt)
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					// console.log(loginRes.code);
					that.$Fpublic.code = loginRes.code;
					let parma = {
						'code': that.$Fpublic.code,
						Loginciphertext: RSA_encrypt().encrypt('')
					}
					http.login(parma).then(res => {
						console.error(res.cookies[0].split(';')[0].split('=')[1])
						that.loading = false;
						if (res.data.result == 1) {
							that.$Fpublic.cardId = res.data.Data.CardData;
							uni.setStorageSync('Cardid', res.data.Data.CardData);
							that.$Fpublic.headerCookie = res.cookies[0].split(';')[0].split('=')[1];
							uni.setStorageSync('cooks', that.$Fpublic.headerCookie);
							uni.setStorageSync('AKey', res.data.Data.AKey)
							uni.setStorageSync('AIV', res.data.Data.AIV)
							uni.switchTab({
							    url: '/pages/fcard/fcard'
							});
						}

					}).catch(err => {
						// console.error(err)
						that.loading = false;
					})
				}
			});
		},
		onLoad() {
			// const key = new NodeRSA({ b: 2048 }); //生成2048位的密钥
			// let publicDer = key.exportKey("pkcs1-public-pem");  //公钥
			// let privateDer = key.exportKey("pkcs1-private-pem");//私钥
			// console.log(publicDer,privateDer)
		},
		methods: {
			cancel(){
				
			},
			confirm(){
				if(this.checked){
					uni.redirectTo({
						url:'../login/login'
					})
				}else{
					uni.showToast({
						title: '请先勾选同意注册',
						icon: 'none'
					})
					return
				}
			},
			Tohome(){
				console.log('toindex');
				uni.navigateTo({
					url: '/pages/QrCode/QrCode'
				})
			}
		}
	}
</script>

<style lang="scss">
	/* pages/login/index.wxss */
	.contentlogin {
		width: 100%;
		height: 100%;
		.cardBox{
			width: 80%;
			margin-left: 10%;
			margin-top: 300rpx;
		}
		.box_warp_dialog {
			margin: 0 20rpx;
			text {
				display: inline-block;
				width: 100%;
				font-size: 25upx;
				padding-left: 10upx;
				margin: 10upx 0;
			}
		}
		.box_foot_dialog{
			width: 100%;
			height: 60upx;
			text-align: center;
			line-height: 60upx;
			>view{
				width: 50%;
				display: inline-block;
				height: 100%;
			}
			.asd1{
				color: #fff;
				// transform: scale(0.7,0.7);
				background-image: linear-gradient(68deg, #334ffd 0%, #3bb7ff 100%);
			}
			.asd2{
				background-color: #fff;
			}
		}
		.login {
			position: relative;
			width: 100%;
			height: 100%;

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.btn {
				position: fixed;
				bottom: 50upx;
				width: 550upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				margin-left: 100upx;
				color: #fff;
				font-size: 35upx;
				background-image: linear-gradient(68deg, #334ffd 0%, #3bb7ff 100%);

			}
			

		}
	}

	page,
	body {
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;

	}

	input {
		display: inline-block;
		margin: 0 auto;
		padding: 0 10px;
		height: 50rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.8);
		border-radius: 2rpx;
		color: rgb(0, 0, 0);
		background: rgba(245, 245, 245, 0.15);
		width: 480rpx;
	}

	.inp label {
		display: inline-block;
		width: 150rpx;
		text-align: right;
		height: 40rpx;
		font-size: 35rpx;
		vertical-align: top;
	}

	.inp {
		width: 700rpx;
		height: 60rpx;
		line-height: 60rpx;
		padding: 20rpx 0;
		border-top: 1rpx solid rgb(112, 112, 112);
		border-bottom: 1rpx solid rgb(112, 112, 112);
		margin-left: 25rpx;
		margin-top: 30rpx;
	}

	.btn {
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
	}

	.btn button {
		width: 650rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin-top: 5rpx;
	}

	.top {
		width: 750rpx;
		text-align: center;
	}

	.top image {
		width: 450rpx;
		height: 300rpx;
		/* border-radius: 50%; */
		border-radius: 50%;
		background-color: #FFF;
		/* border:5rpx solid rgb(90, 87, 255); */
	}

	.foot {
		width: 100%;
		padding: 10rpx 0;
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		font-size: 20rpx;
	}


	
	.root {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		background-color: #FFF;
	}

	.cu-btn {
		box-shadow: 6rpx 6rpx 8rpx rgba(48, 156, 63, 0.2);
		background-color: #39b54a;
		color: #fff;
		padding: 0 40rpx;
		font-size: 32rpx;
		height: 80rpx;
		width: 60%;
		border-radius: 8rpx;
	}

	.etxbtn {
		height: 80rpx;
		width: 650rpx;
		background-color: #f5f5f5;
		margin-left: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
	}

	.Registration {
		/* background-image: url('../../image/bg.jpg'); */
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
		background: #fff;
	}

	.Registration_dla {

		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3)
	}

	.Registration .box {
		background-color: #fff;
		position: absolute;
		width: 550rpx;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		box-shadow: 0 0 15rpx #4c9fff;
		left: 100rpx;
		top: 250rpx;
		font-size: 35rpx;
	}

	.Registration .box .box_warp text {
		display: inline-block;
		width: 530rpx;
		font-size: 25rpx;
		padding-left: 10rpx;
		margin: 10rpx 0;
	}

	.Registration .box .etxbtn {
		width: 450rpx;
		margin-left: 40rpx;
	}

	.close {
		position: absolute;
		top: -25rpx;
		right: -25rpx;
		width: 60rpx;
		height: 60rpx;
		border: 2rpx solid #4c9fff;
		border-radius: 50%;
		background-color: #fff;
	}

	.close::after {
		content: "";
		position: absolute;
		width: 50rpx;
		height: 2rpx;
		background-color: #4c9fff;
		transform: rotate(45deg);
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}

	.close::before {
		content: "";
		position: absolute;
		width: 50rpx;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		height: 2rpx;
		background-color: #4c9fff;
		transform: rotate(135deg);
	}

	.atonce {
		position: absolute;
		bottom: 50rpx;
		width: 550rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 100rpx;
	}
</style>
